<template>
  <!-- TODO 学习计划 -->
  <el-card>
    <template #header>
      <div style="display: flex; justify-content: space-around">
        <h3>学习计划</h3>
        <el-button type="primary" size="small" @click="clearCompletedHandler">清除已完成</el-button>
      </div>
    </template>

    <div>
      <div v-if="learning_plan && learning_plan.length > 0">
        <div  v-for="(item,index) of learning_plan" :key="index">
          <div :class="{deleteLine: item.status==='COMPLETED'}" style="display: flex">
            <el-checkbox style="margin-right: 4px;" v-model="item.completed" @change="changePlanStatusHandler(index)" :checked="item.status !== 'ENABLE'" size="small" />
            <div style="display: block">
              <div class="deadline" :class="{deleteLine: item.status==='COMPLETED'}">
                <el-icon><AlarmClock /></el-icon><span v-if="item.deadline">{{ item.deadline }}</span>
              </div>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <span>我这么大的学习计划呢？</span>
      </div>

      <div>
        <div v-if="show_new_plan" class="learning-form">
          <el-date-picker v-model="one_plan.deadline"
                          size="small"
                          style="width: 80%"
                          type="datetime"
                          value-format="YYYY-MM-DD h:m:s"
                          placeholder="入截止时间"
          />
          <el-input v-model="one_plan.title" style="width: 80%" size="small" placeholder="计划主题"/>
          <el-input v-model="one_plan.description" style="width: 80%" size="small" type="textarea" placeholder="计划详情"/>
          <div style="display: flex; justify-content: space-around">
            <el-button @click="show_new_plan = !show_new_plan" size="small">取消</el-button>
            <el-button type="primary" size="small" @click="planingFormSubmitHandler">确定</el-button>
          </div>
        </div>
        <el-button v-else @click="show_new_plan = !show_new_plan" size="small" style="width: 100%;">+</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { ref } from 'vue'
import { AlarmClock } from '@element-plus/icons-vue'
import {
  learningPlanByUser,
  learningPlanCompleted,
  learningPlanEnable,
  learningPlanListDelete,
  learningPlanSave
} from '@/api/learning-plan'
export default {
  name: 'home-learning-plan-card',
  components: { AlarmClock },
  setup () {
    return {
      show_new_plan: ref(false),
      learning_plan: ref([]),
      one_plan: ref({
        completed: '',
        title: '',
        description: '',
        deadline: '',
        status: ''
      })
    }
  },
  methods: {
    changePlanStatusHandler (index) {
      console.log(index)
      const status = this.learning_plan[index].status
      if (status === 'ENABLE') {
        learningPlanCompleted(this.learning_plan[index]).then(value => {
        })
      } else {
        learningPlanEnable(this.learning_plan[index]).then(value => {
        })
      }
      this.learning_plan[index].status = this.learning_plan[index].status === 'ENABLE' ? 'COMPLETED' : 'ENABLE'
    },
    planingFormSubmitHandler () {
      if (this.one_plan.deadline && this.one_plan.description && this.one_plan.deadline) {
        learningPlanSave(this.one_plan).then(value => {
          if (value.data) {
            this.learning_plan.push(this.one_plan)
          }
        })
      } else {
        this.one_plan = {
          title: '',
          description: '',
          deadline: '',
          status: 'ENABLE'
        }
      }
      this.show_new_plan = false
    },
    clearCompletedHandler () {
      const learningPlanDelete = this.learning_plan.filter((item) => {
        return item.completed === true
      })
      console.log(learningPlanDelete)
      if (learningPlanDelete.length !== 0) {
        learningPlanListDelete(learningPlanDelete).then((value) => {
        })
      }
      this.learning_plan = this.learning_plan.filter((item) => {
        return item.status === 'ENABLE'
      })
    },
    getUserLearningPlan () {
      learningPlanByUser().then(value => {
        console.log(value)
        this.learning_plan = value.data
      })
    }
  },
  mounted () {
    this.getUserLearningPlan()
  }
}
</script>

<style scoped>
.deleteLine{
  text-decoration: line-through;
}
.deadline{
  display: flex;
  background-color: #586c88;
  color: #fcfcfc;
  padding: 3px;
  justify-items: center;
  font-size: 12px;
}
.learning-form{
  background-color: #586c88;
  text-align: center;
  padding: 5px;
}
.learning-form > *{
  margin-top: 5px;
}
</style>
